<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
		list-style: none;
		outline: none;
	}
	.fram{
		width: 700px;
		margin: 0 auto;
		text-align: center;

	}
	.head{
		width: 100%;
		height: 50px;
	}
	button{
		background: #999999;
		height: 30px;
		width: 120px;
		line-height: 30px;
		color:#fff;
		cursor: pointer;
		border-radius:5px;
	}
	.content{
		height: 600px;
	}
	.content td{
		height: 50px;
		width:250px;
		border:1px solid #ccc;
		text-align: center;
		line-height: 50px;
	}
	</style>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
	<!-- <button class="btn">按钮</button>

	<p id="p_1">徐鹏飞最帅</p>
	<table >
		<tr>
			<td>ID</td>
			<td>姓名</td>
			<td>年龄</td>
		</tr>
		<tbody>
			<tr>
				<td>1</td>
				<td>zhans</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1</td>
				<td>zhans</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1</td>
				<td>zhans</td>
				<td>25</td>
			</tr>
			<tr>
				<td>1</td>
				<td>zhans</td>
				<td>25</td>
			</tr>
		</tbody>
	</table> -->

	<div class="fram">
		<div class="head">
			<button class="btn_odd">选择双行</button>
			<button class="btn_even">选择单行</button>
			请输入选择的行数<input type="text" name="">
			<button class="choice">用户选择</button>
		</div>
		<div class="content">
			<table>
				<tr>
					<td>items1</td>
				</tr>
				<tr>
					<td>items2</td>
				</tr>
				<tr>
					<td>items3</td>
				</tr>
				<tr>
					<td>items4</td>
				</tr>
				<tr>
					<td>items5</td>
				</tr>
				<tr>
					<td>items6</td>
				</tr>
				<tr>
					<td>items7</td>
				</tr>
				<tr>
					<td>items8</td>
				</tr>
			</table>
		</div>
	</div>





	<script>
		// $('.btn').click(function(){
		// 	alert(111)
		// })
		// $('#p_1').css('color','red')
		// var div =$('#p_1').get(0)
		// div.innerHTML='html'
		// $('tbody tr:odd').css('background','red')
		// $('tbody tr:eq(2)').css('background','#CCC')
		$('.choice').click(function(){
			$('tr').css('background','none')
			var num = $('input').val()-1
			if (num==-1) {
				return;
			}
			$('tr:eq('+num+')').css('background','red')
		})
		$('.btn_odd').click(function(){
			$('tr').css('background','none')
			$('tr:odd').css('background','red')
		})
		$('.btn_even').click(function(){
			$('tr').css('background','none')
			$('tr:even').css('background','red')
		})
	</script>
</body>
</html>